<script>
Ext.onReady(function(){	
	
	var destroy_comp = function(id){
		if (typeof (Ext.getCmp(id) ) != 'undefined'){
			Ext.getCmp(id).destroy();
		}
	}
	
	destroy_comp("m_users");
	destroy_comp("form_users");
	destroy_comp("user_id");
	destroy_comp("user_name");
	destroy_comp("user_password");
	destroy_comp("repeat_password");
	destroy_comp("user_groups");
	destroy_comp("gridUsers");
	
	var win,task;
	
	var m_users = new Ext.data.Store({
		id: 'm_users',
		proxy: new Ext.data.HttpProxy({
			url: '<?php echo base_url('c_users');?>',
			method: 'POST'
		}),
		baseParams : {task : 'LIST', start : 0, limit : 15 },
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'total',
			idProperty: 'user_id'
		},[
			{name: 'user_id',     type: 'int',     mapping: 'user_id'},
			{name: 'user_name',   type: 'varchar', mapping: 'user_name'},
			{name: 'last_name',   type: 'varchar', mapping: 'last_name'},
			{name: 'user_tetala', type: 'date',		mapping: 'user_tetala'},
			{name: 'user_email',  type: 'varchar', mapping: 'user_email'},
			{name: 'user_passwd', type: 'varchar', mapping: 'user_passwd'},
			{name: 'user_group',  type: 'varchar', mapping: 'user_groups'},			
			{name: 'user_active', type: 'varchar', mapping: 'user_active'},
			{name: 'user_kota',   type: 'varchar', mapping: 'user_kota'},
			{name: 'user_join',   type: 'varchar', mapping: 'user_join'},
			// {name: 'user_tetala',   type: 'varchar', mapping: 'user_tetala'},
			{name: 'user_foto',   type: 'varchar', mapping: 'user_foto'},
			{name: 'user_mind',   type: 'varchar', mapping: 'user_mind'}
		])
	});
	//FIELD DARI FORM 
	var user_id = new Ext.form.TextField({
        fieldLabel: 'ID',
		width:240,
		id  : 'user_id',
		name: 'user_id',
		hidden: true
        });
	var user_name = new Ext.form.TextField({
        fieldLabel: 'First Name',
		name: 'user_name',
		labelWidth: 169,
		allowBlank: false,
		width:240,
		id  : 'user_name'
        });
	var last_name = new Ext.form.TextField({
        fieldLabel: 'Last Name',
		name: 'last_name',
		labelWidth: 169,
		allowBlank: false,
		width:240,
		id  : 'last_name'
        });
	var user_tetala = new Ext.form.DateField({
		fieldLabel : 'Date Of Birth',
		format : 'd F Y',
		allowBlank: false,
		anchor : '96%'
		});
	var user_email = new Ext.form.TextField({
        fieldLabel: 'Email',
		name: 'user_email',
		labelWidth: 169,
		allowBlank: false,
		width:240,
		id  : 'user_email'
        });
	var user_kota = new Ext.form.TextField({
        fieldLabel: 'City',
		name: 'user_kota',
		labelWidth: 169,
		allowBlank: false,
		width:240,
		id  : 'user_kota'
        });
	var user_password = new Ext.form.TextField({
        fieldLabel: 'Password',
		id  : 'user_password',
		name: 'user_password',
		allowBlank: false,
		width:240,
		inputType:'password'
        });
	var repeat_password = new Ext.form.TextField({
       	fieldLabel: 'Confirm Password',
		id  : 'repeat_password',
		name: 'repeat_password',
		width:240,
		inputType:'password'
        });
	//--------------------------------------------------------------------------------------
	var store_groups = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url: 'c_users',
			method: 'POST'
		}),
		baseParams:{task:'GET_STORE_COMBO' ,start:0, limit:10},
		reader: new Ext.data.JsonReader({
			root: 'results',
			totalProperty: 'total',
			idProperty: 'group_id',
		},[
			{name: 'group_id',   type: 'int', mapping: 'group_id'},
			{name: 'group_desc', type: 'varchar', mapping: 'group_name'}
		])
	});
	function reset(){
		Ext.getCmp('user_id').setValue("");
		Ext.getCmp('user_name').setValue("");
		Ext.getCmp('last_name').setValue("");
		// Ext.getCmp('user_tetala').setValue("");
		Ext.getCmp('user_email').setValue("");
		Ext.getCmp('user_password').setValue("");			
		Ext.getCmp('repeat_password').setValue(""); 
		Ext.getCmp('user_groups').setValue(""); 
	}
	
	var form_users = new Ext.FormPanel({
		frame:true,
		id:'form_users',
		bodyStyle:'padding:5px 5px 0',
		width: 400,
		autoHeight: true,
		labelWidth:125,
		defaultType: 'textfield',
		fieldDefaults: {
			labelWidth: 169
		},
		items :[user_id,user_name,last_name,user_tetala,user_email,user_kota,user_password,repeat_password,{
				xtype:'combo',
				id  : 'user_groups',
				typeAhead: true,
				allowBlank: false,
				triggerAction: 'all',
				store:store_groups,
				fieldLabel: 'User Groups',
				name: 'user_groups',
				valueField: 'group_id',
				displayField: 'group_desc'
			}
		],
		buttons: [{
			text: 'Simpan',
			handler: function(){			
				var user_id       = Ext.getCmp('user_id').getValue();
				var user_name     = Ext.getCmp('user_name').getValue();
				var user_passwd   = Ext.getCmp('user_password').getValue();
				var user_repeat   = Ext.getCmp('repeat_password').getValue(); 
				var user_groups   = Ext.getCmp('user_groups').getValue();
				if(form_users.form.isValid()){
					if(user_passwd == user_repeat){
						Ext.Ajax.request({  
							waitMsg: 'Mohon tunggu...',
							url: 'c_users',
							params: {
								task        : task,
								user_id     : user_id,
								user_name   : user_name,
								user_passwd : user_passwd,
								user_group  : user_groups
							}, 
							success: function(response){             
								var result = eval(response.responseText);
								switch(result){
									case 0:
										Ext.MessageBox.alert('Information','Maaf, data yang username tersebut sudah terdaftar !');
										break;
									case 1:
										m_users.reload();
										Ext.MessageBox.alert('Simpan Berhasil ','Data berhasil disimpan');
										win.hide()
										reset();
										break;
									default:
										Ext.MessageBox.show({
										   title: 'Warning',
										   msg: 'Data tidak bisa disimpan',
										   buttons: Ext.MessageBox.OK,
										   animEl: 'save',
										   icon: Ext.MessageBox.WARNING
										});
									break;
								}        
							},
							failure: function(response){
								var result=response.responseText;
								Ext.MessageBox.show({
											   title: 'Error',
											   msg: 'Tidak bisa terhubung dengan database !.',
											   buttons: Ext.MessageBox.OK,
											   animEl: 'database',
											   icon: Ext.MessageBox.ERROR
								});	
							}                      
						});
					} else {
						Ext.MessageBox.show({
							   title: 'Information',
							   msg  : 'Confirm Password Anda Salah !',
							   buttons: Ext.MessageBox.OK,
							   animEl: 'database',
							   icon: Ext.MessageBox.WARNING
						});	
					}
				} else {
					Ext.MessageBox.show({
					   title: 'Information',
					   msg  : 'Maaf data yang anda masukan belum lengkap !',
					   buttons: Ext.MessageBox.OK,
					   animEl: 'database',
					   icon: Ext.MessageBox.WARNING
					});	
				}
			}
		},{
			text: 'Batal',
			handler : function (){
				reset();
				win.hide();
			}			
		}]
	});
	// m_users.load();
	
	win = new Ext.Window({
		title: 'Form Users',
		closable: true,
		closeAction: 'hide',
		width: 420,
		autoHeight: true,
		layout: 'fit',
		resizable: false,
		modal: true,
		items: form_users
	});
	
	var cm_users = new Ext.grid.ColumnModel([
		{
			header: 'ID',
			dataIndex: 'user_id',
			width: 150,
			sortable: true,
			hidden: true
		},{
			header: 'First Name',
			dataIndex: 'user_name',
			width: 150,
			sortable: true
		},{
			header: 'Last Name',
			dataIndex: 'last_name',
			width: 150,
			sortable: true
		},{
			header: 'Date of Birth',
			dataIndex: 'user_tetala',
			width: 150,
			sortable: true
		},{
			header: 'Email',
			dataIndex: 'user_email',
			width: 150,
			sortable: true
		},{
			header: 'City',
			dataIndex: 'user_kota',
			width: 150,
			sortable: true
		},{
			header: 'User Password',
			dataIndex: 'user_passwd',
			width: 150,
			sortable: true,
			hidden: true
		},{
			header: 'User ID',
			dataIndex: 'user_group_id',
			width: 150,
			sortable: true,
			hidden: true
		},{
			header: 'User Groups',
			dataIndex: 'user_groups',
			width: 150,
			sortable: true
		},{
			header: 'User Aktif',
			dataIndex: 'user_aktif',
			width: 150,
			sortable: true,
			hidden: true
		}	
	]);
	
	var gridUsers =  new Ext.grid.EditorGridPanel({
		id:'gridUsers',
		el:'gridUsers',
		title:'Daftar Users',
		autoHeight: true,
		store: m_users,
		cm   : cm_users,
		enableColLock:false,
		width: "100%",
		clicksToEdit:2,
		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
		viewConfig: { forceFit:true },
		bbar: new Ext.PagingToolbar({
			pageSize: 10,
			store: m_users,
			displayInfo: true
		}),
		
		tbar: [
		{
			text    : 'Tambah',
			iconCls : 'exticon-add',
			handler : function(){
				task = "SAVE";
				store_groups.load();
				win.show();
			}
		},'-',{
			text    : 'Ubah',
			iconCls : 'exticon-edit',
			handler : function(){
				task = "EDIT";
				var records = gridUsers.getSelectionModel().getSelected();
				if(typeof(records) === "undefined"){
					Ext.MessageBox.show({
						title           : 'Error',
						msg             : 'Maaf, Tidak ada data yang dipilih untuk di Ubah !',
						icon            : Ext.MessageBox.ERROR,
						buttons         : Ext.MessageBox.OK
					});
				} else {
					Ext.getCmp('user_id').setValue(records.data.user_id);
					Ext.getCmp('user_name').setValue(records.data.user_name);
					Ext.getCmp('last_name').setValue(records.data.last_name);
					Ext.getCmp('user_email').setValue(records.data.user_email);
					// Ext.getCmp('user_tetala').setRawValue(records.data.user_tetala);
					Ext.getCmp('user_kota').setValue(records.data.user_kota);
					win.show();
					store_groups.load();
					Ext.getCmp('user_groups').setValue(records.data.user_id);
					Ext.getCmp('user_groups').setRawValue(records.data.user_groups);
				}
			}
		},'-',{
			text    : 'Hapus',
			iconCls : 'exticon-delete',
			handler : function(){
				var records = gridUsers.getSelectionModel().getSelected();
				if(typeof(records) === "undefined"){
					Ext.MessageBox.show({
						title           : 'Error',
						msg             : 'Maaf , Tidak ada data yang dipilih untuk di Hapus !',
						icon            : Ext.MessageBox.ERROR,
						buttons         : Ext.MessageBox.OK
					});
				} else {
					Ext.Msg.confirm('Warning','Apakah anda yakin menghapus data ini ?', function(btn){
					if (btn == 'yes'){
						m_users.reload();
						task = "DELETE";
						var user_id = records.data.user_id;
						Ext.Ajax.request({  
							waitMsg: 'Mohon tunggu...',
							url: 'c_users',
							params: {
								task        : task,
								user_id     : user_id
							}, 
							success: function(response){             
								var result = eval(response.responseText);
								switch(result){
									case 1:
										Ext.MessageBox.alert('Simpan Berhasil ','Data berhasil di hapus');
										m_users.reload();
										break;
									default:
										Ext.MessageBox.show({
										   title: 'Warning',
										   msg: 'Data tidak bisa disimpan',
										   buttons: Ext.MessageBox.OK,
										   animEl: 'save',
										   icon: Ext.MessageBox.WARNING
										});
									break;
								}        
							},
							failure: function(response){
								var result=response.responseText;
								Ext.MessageBox.show({
											   title: 'Error',
											   msg: 'Tidak bisa terhubung dengan database !.',
											   buttons: Ext.MessageBox.OK,
											   animEl: 'database',
											   icon: Ext.MessageBox.ERROR
								});	
							}                      
						});
					}
					});
				}
			}
		}, new Ext.app.SearchField({
			store: m_users,
			listeners:{
				specialkey: function(f,e){
					if(e.getKey() == e.ENTER){
						gridUsers.baseParams={start:0, limit:15};
		            }
				},
				render: function(c){
				Ext.get(this.id).set({qtitle: 'Cari'});
				}
			},
			width: 120
		})
		]
	});
	gridUsers.render();
	m_users.load();
});
</script>
<div class="page-header color1"><h3>DAFTAR USERS</h3></div>
<div id="gridUsers"></div>